<template>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item v-for="(item,i) in goodsDetailList.pics" :key="i">
				<image :src="item.pics_big" @click="preview(i)"></image>
			</swiper-item>
		</swiper>
		<view class="goods_info_box" v-if="goodsDetailList.goods_name">
			<view class="goods_price">
				￥{{goodsDetailList.goods_price}}
			</view>
			<view class="goods_body">
				<view class="goods_name">
					{{goodsDetailList.goods_name}}
				</view>
				<view class="favi">
					<uni-icons type="star" size="18" color="gray"></uni-icons>
					<text>收藏</text>
				</view>
			</view>
			<view class="yf">
				快递: 免运费
			</view>
		</view>
		<!-- 商品详情信息 -->
		<rich-text :nodes="goodsDetailList.goods_introduce"></rich-text>
		<!-- 商品导航组件 -->
		<view class="goods_nav">
		  <!-- fill 控制右侧按钮的样式 -->
		  <!-- options 左侧按钮的配置项 -->
		  <!-- buttonGroup 右侧按钮的配置项 -->
		  <!-- click 左侧按钮的点击事件处理函数 -->
		  <!-- buttonClick 右侧按钮的点击事件处理函数 -->
		  <uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsDetailList:{},
				options: [{
				      icon: 'shop',
				      text: '店铺'
				    }, {
				      icon: 'cart',
				      text: '购物车',
				      info: 2
				    }],
				    // 右侧按钮组的配置对象
				    buttonGroup: [{
				        text: '加入购物车',
				        backgroundColor: '#ff0000',
				        color: '#fff'
				      },
				      {
				        text: '立即购买',
				        backgroundColor: '#ffa200',
				        color: '#fff'
				      }
				    ]
			};
		},
		methods:{
			async getGoodsDetail(goods_id){
				const { data : res } = await uni.$http.get("/api/public/v1/goods/detail",{goods_id})
				if (res.meta.status !== 200) return uni.$showMsg()
				this.goodsDetailList = res.message
				 res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g, '<img style="display:block;" ')
			},
		preview(i){
			uni.previewImage({
				current:i,
				urls:this.goodsDetailList.pics.map(x => x.pics_big)
			})
		},
		// 左侧按钮的点击事件处理函数
		onClick(e) {
		 if (e.content.text === '购物车') {
		     // 切换到购物车页面
		     uni.switchTab({
		       url: '/pages/cart/cart'
		     })
		   }
		}
		},
		onLoad(options){
			const goods_id = options.goods_id
			this.getGoodsDetail(goods_id)
		}
	}
</script>

<style lang="scss">
swiper {
  height: 750rpx;
	background-color: #ffffff;
  image {
    width: 100%;
    height: 100%;
  }
}
.goods_info_box{
	padding: 10px;
	background-color: #ffffff;
	.goods_price{
		color: red;
		font-size: 18px;
		margin:10px 0;
	}
	.goods_body{
		display: flex;
		justify-content: space-between;
		.goods_name{
			font-size: 13px;
		}
		.favi{
			width: 120px;
			font-size: 12px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			border-left: 1px solid #f5f5f5;
			align-items:center;
		}
		
	}
	// 运费
	  .yf {
	    margin: 10px 0;
	    font-size: 12px;
	    color: gray;
	  }
}
.goods_nav{

	  // 为商品导航组件添加固定定位
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  width: 100%;
}
</style>
